<template>
  <div class="Page-container">
    <!-- <h1 class="home">home</h1> -->

    <login
      class="login"
      v-if="isLogin"
      @switch-to-register="isLogin = false"
    ></login>
    <regsiter
      class="regsiter"
      v-else
      @switch-to-login="isLogin = true"
    ></regsiter>
  </div>
</template>

<script>
import login from "@/views/login/login.vue";
import regsiter from "@/views/login/regsiter.vue";

export default {
  name: "LoginIndex",
  components: {
    login,
    regsiter,
  },
  data() {
    return {
      isLogin: true, // true=显示登录，false=显示注册
    };
  },
};
</script>

<style lang="scss" scoped>
template {
  background-color: #fbfbfd;
}

.Page-container {
  display: flex; // flex布局
  margin-top: 150px; // 顶部留白
  justify-content: center; // 居中
}

.home {
  position: absolute; // 绝对定位
  top: 0; // 顶部对齐
  left: 0; // 左边对齐
  padding: 35px; // 内边距
  font-size: 30px; // 字体大小
}

.login,
.regsiter {
  display: flex; // flex布局
  position: relative; // 相对定位
  flex-direction: column; // 垂直排列
  align-items: center; // 居中
  padding: 80px; // 内边距
  border-radius: 15px; // 圆角
  box-shadow: 0 5px 10px 4px rgba(0, 0, 0, 0.2);
  background-color: #ffffff; // 背景色
  gap: 30px; // 间隔
}
</style>
